<template>
    <div class="detail">
        <div class="banner">
            <img :src="detailData.image" alt="">
        </div>
        <div class="title">
            {{detailData.title}}
        </div>
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" dot />
            <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/layout/cart')"/>
            <van-goods-action-icon icon="shop-o" text="店铺" />
            <van-goods-action-button type="warning" text="加入购物车" @click="addToCartFun(detailData.id)"/>
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data() {
        return {
            detailData: {},
            id: null
        }
    },
    created() {
        this.id = this.$route.params.id;
        this.getShopDetail(this.id)
    },
    computed: {
        ...mapState('user', ['userData'])
    },
    methods: {
        // 获取商品详情
        getShopDetail(id) {
            this.$api.getShopDetail(id).then(res=>{
                if(res.code === 1){
                    this.detailData = res.data[0]
                }
            })
        },
        // 加入购物车
        addToCartFun(id){
            this.$api.addToCart({
                user_id:this.userData.id,
                shop_id:id
            }).then(res=>{
                if(res.code===1) {
                    // 
                    console.log('添加成功')
                }else {
                    console.log('添加失败')
                }
            })
        }
    }
}
</script>

<style>

</style>